<template>
  <div class="mainPad">
    <div class="wei">
      <div class="titl">
        未支付订单信息：
      </div>

      <div class="l1">
        <div class="d1">
          <div class="d11">
            万家饺子（软件园E18店）&nbsp;
            <div class="ic">
              <i class="fas fa-caret-down"></i>
            </div>
          </div>
          <div class="zj justify-end">
            ￥49&nbsp;
            <div class="qzf">
              去支付
            </div>
          </div>
        </div>
        <div class="splist">
          <div class="businessCard">
            <div class="list3">
              <div class="my-1.5">纯肉鲜肉（水饺）×&nbsp;2</div>
            </div>

            <div class="list4">
              <div class="flex justify-end">
                ￥15
              </div>

            </div>

          </div>
          <div class="businessCard">
            <div class="list3">
              <div class="my-1.5">玉米鲜肉（水饺）×&nbsp;1</div>
            </div>

            <div class="list4">
              <div class="flex justify-end">
                ￥16
              </div>

            </div>

          </div>
          <div class="businessCard">
            <div class="list3">
              <div class="font-bold my-1.5">配送费</div>
            </div>

            <div class="list4">
              <div class="flex justify-end">
                ￥3
              </div>

            </div>

          </div>
        </div>
      </div>

      <div class="l1">
        <div class="d1">
          <div class="d11">
            小锅饭豆腐馆（全运店）&nbsp;
            <div class="ic">
              <i class="fas fa-caret-down"></i>
            </div>
          </div>
          <div class="zj justify-end">
            ￥55&nbsp;
            <div class="qzf">
              去支付
            </div>
          </div>

        </div>
        <div class="splist">
          <div class="businessCard">
            <div class="list3">
              <div class="my-1.5">纯肉鲜肉（水饺）×&nbsp;2</div>
            </div>

            <div class="list4">
              <div class="flex justify-end">
                ￥15
              </div>

            </div>

          </div>
          <div class="businessCard">
            <div class="list3">
              <div class="my-1.5">玉米鲜肉（水饺）×&nbsp;1</div>
            </div>

            <div class="list4">
              <div class="flex justify-end">
                ￥16
              </div>

            </div>

          </div>
          <div class="businessCard">
            <div class="list3">
              <div class="font-bold my-1.5">配送费</div>
            </div>

            <div class="list4">
              <div class="flex justify-end">
                ￥3
              </div>

            </div>

          </div>
        </div>
      </div>
    </div>

    <div class="h-12">

    </div>
    <div class="yi">
      <div class="titl">
        已支付订单信息：
      </div>
      <div class="l1">
        <div class="d1">
          <div class="d11">
            万家饺子（软件园E18店）&nbsp;
            <div class="ic">
              <i class="fas fa-caret-down"></i>
            </div>
          </div>
          <div class="zj justify-end">
            ￥49
          </div>
        </div>
      </div>

      <div class="l1">
        <div class="d1">
          <div class="d11">
            小锅饭豆腐馆（全运店）&nbsp;
            <div class="ic">
              <i class="fas fa-caret-down"></i>
            </div>
          </div>
          <div class="zj justify-end">
            ￥55
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import store from "../store";
import {onBeforeMount} from "vue";

function setTitle(){
  store.state.tit="我的订单"
}

onBeforeMount(()=>{
  setTitle()
})

</script>

<style scoped>

.mainPad {
  height: 86vh;
  overflow: scroll;
  @apply relative;
}

.businessCard{
  @apply m-1 flex flex-row justify-center content-center items-center;
}

.titl{
  @apply flex m-4 text-gray-400;
}

.d11{
  width:64%;
  @apply flex flex-row text-base my-1.5;
}

.zj{
  width: 30%;
  @apply flex flex-row text-right m-1 text-base my-1.5 ;
}

.qzf{
  @apply bg-orange-400 border rounded-md text-white;
}

.d1{
  @apply flex flex-row justify-center content-center items-center m-1;
}

.list3{
  width: 70%;
  @apply flex flex-col m-1 text-sm;
}

.list4{
  width: 23%;
  @apply flex flex-col text-right text-sm;
}

.barPad {
  @apply w-full flex flex-row h-16 justify-center content-center items-center
  border border-solid border-gray-300 shadow-lg
  bottom-0 fixed;
}

.barPad div {
  @apply basis-1/4 text-center;
}
</style>